<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>21.CSS实现tabbar凹凸圆选中动画</title>
  </head>
  <!-- 通用样式 -->
  <link rel="stylesheet" href="../common.css" />
  <!-- 阿里巴巴矢量图标库 -->
  <link rel="stylesheet" href="../font.css" />
  <style>
    /* 定义全局变量 */
    :root {
      --color: #222;
      --bg: orange;
      --w: 100px;
      --t: 450px;
      --c: 70px;
    }
    .container {
      background: #fff;
      width: var(--t);
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      position: relative;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: var(--w);
      cursor: pointer;
    }
    .item span {
      font-size: 20px;
      position: relative;
      z-index: 1;
      /* 添加过渡效果 */
      transition: all 0.5s;
    }
    .item p {
      position: absolute;
      font-size: 15px;
      font-weight: bold;
      color: var(--color);
      transform: translateY(20px);
      /* 添加过渡效果 */
      transition: all 0.5s;
      /* 默认透明度为0，不显示 */
      opacity: 0;
    }
    /* 添加hover事件，以及选中样式 */
    .item:hover p,
    .item.active p {
      opacity: 1;
      transform: translateY(12px);
    }
    .item:hover span,
    .item.active span {
      transform: translateY(-35px);
    }
    .active-box {
      position: absolute;
      width: var(--c);
      height: var(--c);
      background: var(--bg);
      --left-pad: calc(var(--t) - (4 * var(--w)));
      top: -50%;
      left: calc((var(--left-pad) / 2) + (var(--w) / 2) - (var(--c) / 2));
      border-radius: 50%;
      border: 4px solid var(--color);
      /* 添加过渡效果 */
      transition: all 0.5s;
      /* 设置选中圆环的transform */
      transform: translateX(calc(var(--w) * var(--n)));
    }
    .active-box::before,
    .active-box::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 20px;
      height: 20px;
      background: transparent;
    }
    .active-box::before {
      left: -20px;
      border-radius: 0 20px 0 0;
      box-shadow: 0 -10px 0 0 var(--color);
    }
    .active-box::after {
      right: -20px;
      border-radius: 20px 0 0 0;
      box-shadow: 0 -10px 0 0 var(--color);
    }
  </style>
  <body>
    <div class="container">
      <!-- 第一个默认选中 -->
      <div class="item active" style="--n: 0">
        <span class="iconfont">&#xe611;</span>
        <p>三明治</p>
      </div>
      <div class="item" style="--n: 1">
        <span class="iconfont">&#xe65e;</span>
        <p>汉堡</p>
      </div>
      <div class="item" style="--n: 2">
        <span class="iconfont">&#xe698;</span>
        <p>沙冰</p>
      </div>
      <div class="item" style="--n: 3">
        <span class="iconfont">&#xe65c;</span>
        <p>可乐</p>
      </div>
      <!-- 添加选中圆环 -->
      <div class="active-box" style="--n: 0"></div>
    </div>
  </body>
  <script>
    const list = document.querySelectorAll(".item");
    let node = document.getElementsByClassName("active-box")[0];
    function clickActive() {
      list.forEach((item) => {
        item.classList.remove("active");
        this.classList.add("active");
      });
      node.style.setProperty("--n", this.style.getPropertyValue("--n").trim());
    }
    list.forEach((item) => {
      item.addEventListener("click", clickActive);
    });
  </script>
</html>
